<template>
  <div class="container">
    <header>
      <div class="game-objectives">
        <div class="target-score">目标分数: {{ targetScore }}</div>
        <h1>几何反转</h1>
        <div class="remaining-steps">剩余步数: {{ remainingSteps }}</div>
      </div>
    </header>
    
    <div class="game-board-container">
      <GameBoard/>
    </div>
    
    <div class="game-info">
      <div class="score-container">
        得分: <span id="score">{{ gameStore.games.score }}</span>
      </div>
      <div class="controls">
        <button @click="handleRestart" :disabled="gameStore.games.isProcessing">重新开始</button>
      </div>
    </div>
    
    <div class="instructions">
      <h2>游戏规则</h2>
      <ul>
        <li>点击卡片会改变自身及上下左右相邻卡片的图案：黑桃 → 红心 → 方块 → 梅花</li>
        <li>当三个或更多相同图案在一条直线上（横向或纵向）时，它们会被消除</li>
        <li>四个横向相同图案会生成横向消除特殊卡片</li>
        <li>四个竖向相同图案会生成竖向消除特殊卡片</li>
        <li>五个同行/同列图案会生成万能Joker卡片</li>
        <li>T型或L型图案会生成爆破特殊卡片</li>
        <li>消除后上方的卡片会下落，顶部会补充新的卡片</li>
        <li>每次消除获得10分，连续消除获得额外加分</li>
        <li>尽可能多地消除卡片来获得高分！</li>
      </ul>
      
    </div>
     <div v-if="showLevelComplete" class="level-complete-overlay">
      <div class="level-complete-modal">
        <h2>恭喜过关！</h2>
        <p>你成功达到了目标分数</p>
        <button @click="backToSelectLevel">确定</button>
      </div>
    </div>
    
    <div v-if="showGameOver" class="game-over-overlay">
      <div class="game-over-modal">
        <h2>游戏结束</h2>
        <p>步数已用尽，未达到目标分数</p>
        <button @click="handleRestart">重新开始</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import GameBoard from '@/components/GameBoard.vue'
import {useGameStore} from '@/store/game'
import {initGame} from '@/utils/gameUtils'
import { useRoute, useRouter } from 'vue-router'

const SIZE = 8;
const gameStore = useGameStore();
const route = useRoute();
const router = useRouter();
// 目标分数，这里赋初值
const targetScore = ref(1000); 
// 初始步数，这里赋初值
const remainingSteps = ref(gameStore.games.step || 20); 
const showLevelComplete = ref(false);
const showGameOver = ref(false);

// 监听分数变化
watch(() => gameStore.games.score, (newScore) => {
  if (newScore >= targetScore.value && remainingSteps.value >= 0) {
    showLevelComplete.value = true;
  }
});

// 监听步数变化
watch(() => gameStore.games.steps, (newSteps) => {
  remainingSteps.value = newSteps;
  if (remainingSteps.value <= 0 && gameStore.games.score < targetScore.value) {
    showGameOver.value = true;
  }
});

// 监听卡片点击（减少步数）
watch(() => gameStore.games.isProcessing, (isProcessing, oldProcessing) => {
  if (gameStore.games.isInitializing) return; // 跳过初始化阶段
  if (!oldProcessing && isProcessing) {
    gameStore.games.steps--;
    remainingSteps.value = gameStore.games.steps;
    
    if (gameStore.games.steps <= 0 && gameStore.games.score < targetScore.value) {
      showGameOver.value = true;
    }
  }
});


// 返回选关界面
const backToSelectLevel = () => {
  router.push('/');
};


// 设置过关的目标分数
onMounted(() => {
  // const level = parseInt(route.path.slice(1)) || 1;
  // switch(level) {
  //   case 1:
  //     targetScore.value = 1000;
  //     break;
  //   case 2:
  //     targetScore.value = 1500;
  //     break;
  //   case 3:
  //     targetScore.value = 2000;
  //     break;
  //   case 4:
  //     targetScore.value = 2500;
  //     break;
  // }


  // 设置过关的目标分数
  targetScore.value = 2000;
  
  // 使用新增的函数初始化游戏
  initializeGameWithSteps();
});

//初始化游戏并重置步数的函数
const initializeGameWithSteps = () => {
  // const level = parseInt(route.path.slice(1)) || 1;
  // switch(level) {
  //   case 1: targetSteps = 20; break;
  //   case 2: targetSteps = 18; break;
  //   case 3: targetSteps = 15; break;
  //   case 4: targetSteps = 12; break;
  // }

  // 设置初始步数
  let targetSteps = 20;

  // 增强初始化保护
  gameStore.games.isInitializing = true; // 添加初始化标记
  gameStore.games.steps = targetSteps; // 临时多设置一步
  
  // 初始化游戏（需要在initGame中处理初始化标记）
  initGame(SIZE); 
  
  // 等游戏完全初始化后修正步数
  setTimeout(() => {
    gameStore.games.steps = targetSteps;
    remainingSteps.value = targetSteps;
    gameStore.games.isInitializing = false;
  }, 100); // 需要根据实际动画时长调整
};



// 处理重新开始按钮点击
const handleRestart = () => {
  if (gameStore.games.isProcessing) return;
  
  // 重置分数
  gameStore.games.score = 0;
  
  // 初始化游戏并重置步数
  initializeGameWithSteps();
  
  // 隐藏游戏结束和过关提示
  showGameOver.value = false;
  showLevelComplete.value = false;
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "game info"
    "instructions instructions";
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

header {
  grid-area: header;
  text-align: center;
  padding: 15px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.game-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: rgba(0, 0, 0, 0.03);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.game-board-container {
  grid-area: game;
  background: rgba(0, 0, 0, 0.03);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.instructions {
  grid-area: instructions;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0;
}

h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-container, .controls {
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 25px;
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: white;
}

#score {
  font-weight: bold;
  font-size: 1.4rem;
  color: #FFD700;
}

button {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.instructions h2 {
  margin-bottom: 12px;
  color: #FFD700;
  text-align: center;
}

.instructions ul {
  list-style-type: none;
  padding: 0 15px;
  text-align: left;
}

.instructions li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
  line-height: 1.5;
}

.instructions li:before {
  content: "◆";
  position: absolute;
  left: 0;
  color: #FFD700;
}

.game-objectives {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.target-score, .remaining-steps {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}

.level-complete-overlay,
.game-over-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.level-complete-modal,
.game-over-modal {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.level-complete-modal h2,
.game-over-modal h2 {
  color: #4CAF50;
  margin-bottom: 1rem;
}

.game-over-modal h2 {
  color: #F44336;
}

.level-complete-modal button,
.game-over-modal button {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1rem;
}

.game-over-modal button {
  background: linear-gradient(45deg, #F44336, #FF9800);
}
</style>